<script lang="ts" setup>
import { searchTeacher } from '@/api/teacher';
import type { Chapter } from '@/types/request';
import { addProduct } from '@/api/product';
import { message } from 'ant-design-vue';

// 步骤条索引
let current = ref(0)

// 创建课程初始参数
let formState = ref({
  title: '',
  summary: '',
  detail: '',
  teacher_id: '',
  hour: '',
  amount: undefined,
  old_amount: undefined,
  bd_zip_url: '',
  note_url: '',
})

// 讲师列表初始参数
let teachers = ref<any>([])

// 获取讲师列表
onMounted(async () => {
  const { data: _teachers } = await searchTeacher({ page: 1, size: 30 })
  teachers.value = _teachers.current_data
})


/**
 * 步骤二
 */
 let chapters = ref<Chapter[]>([])

/**
 * 步骤三
 */
 let cover_img = ref<File>()
async function handleComplete() {
  function reset() {
    current.value = 0
    formState.value = {
      title: '',
      summary: '',
      detail: '',
      teacher_id: '',
      hour: '',
      amount: undefined,
      old_amount: undefined,
      bd_zip_url: '',
      note_url: '',
    }
    cover_img.value = undefined
    chapters.value = []
  }
  const { code } = await addProduct({
    new_details: formState.value,
    cover_img: cover_img.value!,
    chapters: chapters.value
  })

  if (code === 0) {
    message.success('创建成功')
    reset()
  }
}



</script>

<template>
  <div>
    <a-steps :current="current">
      <a-step title="填写课程基本信息" />
      <a-step title="创建课程大纲" />
      <a-step title="发布课程" />
    </a-steps>

    <div m="x-30 t-11 b-8">
      <AddProductBaseInfo :teachers="teachers" :form-state="formState" v-model:current="current" v-show="current === 0" />
      <AddProductOutline v-model:chapters="chapters" v-model:current="current" v-show="current === 1" />
      <AddProductPublish v-model:current="current" v-show="current === 2" @update:image="(img: File) => cover_img = img"
        @complete="handleComplete" />
    </div>
  </div>
</template>

<style>
.ant-steps-item-container {
  display: flex;
}

.ant-steps-item-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ant-steps-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>